<template>
  <div>
    <div class="newsOut">
      <!-- BScroll插件注意事项：里层的高度内容必须大于外层，才可以实现滚动效果 -->
      <div class="newsWrap" ref="BScroll">
        <div class="essay">
          <!-- 下拉加载效果 -->
          <div class="upDown">
            <div v-show="beforePullDown">
              <span>下拉刷新</span>
            </div>

            <div v-show="!beforePullDown">
              <div v-show="isPullingDown">
                <van-loading size="28px" color="#31c27c">加载中...</van-loading>
              </div>

              <div v-show="!isPullingDown">
                <span>刷新成功</span>
              </div>
            </div>
          </div>

          <Essay :essayArr="item" v-for="item in essayInfo" :key="item.id" />

          <!-- 上拉加载效果 -->
          <div class="pullUpWrap" v-if="flag">
            <van-loading size="28px" color="#31c27c" v-show="isLoading"
              >加载中...</van-loading
            >
            <span v-show="!isLoading">没有数据啦~</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Essay from "@/components/Essay";
import BScroll from "@better-scroll/core"; //滚动插件-下拉刷新/上拉触底
import PullDown from "@better-scroll/pull-down"; //下拉刷新 依赖滚动插件
import Pullup from "@better-scroll/pull-up"; //上拉触底
BScroll.use(Pullup);
BScroll.use(PullDown); //使用插件
export default {
  name: "Art",
  data() {
    return {
      essayInfo: [],
      bscroll: null,
      page: 1, //当前页码

      isLoading: true, //控制上拉加载效果
      flag: false,

      beforePullDown: true, //控制下拉加载效果
      isPullingDown: false, //控制下拉显示文字
    };
  },
  async mounted() {
    // 这里使用async和await也是为了等待服务器数据响应回来，再去实例化BScroll对象，解决不能滚动的问题
    await this.getEssayInfo();

    this.initBScroll();
  },
  methods: {
    // 获取文章信息
    async getEssayInfo(page) {
      // 显示加载上拉加载效果
      // this.isLoading=true
      const result = await this.$api.getEssay2(page);

      if (result.status == 200) {
        // 判断服务器响应回来的数据，如果是空数组，那么就不应该再发起网络数据请求
        if (result.data.length == 0) {
          // 隐藏上拉加载效果
          this.isLoading = false;
          this.flag = true;
          return;
        }
        // 旧数据和新数据进行拼接 concat()合并多个数组
        this.essayInfo = this.essayInfo.concat(result.data);
      }
    },
    // 初始化滚动插件配置项
    initBScroll() {
      this.bscroll = new BScroll(this.$refs.BScroll, {
        pullDownRefresh: true, //开启下拉刷新
        pullUpLoad: true, //开启上拉触底
        pullDownRefresh: {
          // 顶部下拉刷新的距离
          threshold: 40,
        },
        click: true
      });
      // 调用上拉触底处理函数
      this.bscroll.on("pullingUp", this.pullingUpHandler);
      // 调用下拉刷新处理函数
      this.bscroll.on("pullingDown", this.pullingDownHandler);
      // 监测实时滚动
      this.bscroll.on("scroll", this.scrollHandler);
    },
    // 监听滚动事件
    scrollHandler(e) {
      // console.log(e.y);
    },
    // 上拉触底-处理函数
    async pullingUpHandler() {
      this.flag=true

      this.beforePullDown = false;
      this.isPullingDown = true;
      if (!this.isLoading) {
        // finishPullUp()：发生上拉动作之后，关闭上拉行为(关闭之后，才能开启下一次)
        this.bscroll.finishPullUp();
        return;
      }

      // 页码
      this.page++;
      await this.getEssayInfo(this.page);

      // finishPullUp()：发生上拉动作之后，关闭上拉行为(关闭之后，才能开启下一次)
      // 每次触发 pullingUp 钩子后，应该主动调用 finishPullUp() 告诉 BetterScroll 准备好下一次的 pullingUp 钩子。
      this.bscroll.finishPullUp();
      // 当 DOM 结构发生变化的时候务必要调用确保滚动的效果正常
      this.bscroll.refresh();


    },
    // 下拉刷新
    async pullingDownHandler() {
      this.isLoading = false;
      this.flag = false;

      this.beforePullDown = false;
      this.isPullingDown = true;

      // 清空数据
      this.page = 1;
      this.essayInfo = [];

      await this.getEssayInfo();
      this.flag = true;
      this.isLoading = true;

      this.beforePullDown = false;
      this.isPullingDown = false;

      this.bscroll.finishPullDown(); // 发生下拉动作之后，关闭下拉刷新行为(关闭之后，才能开启下一次)
      this.bscroll.refresh(); // 当 DOM 结构发生变化的时候务必要调用确保滚动的效果正常

      setTimeout(() => {
        this.beforePullDown = true;
        this.isPullingDown = true;
      }, 1000);
    },
  },
  components: { Essay },
};
</script>

<style lang="less" scoped>
.essay {
  padding: 0 0.2rem;
  padding-top: 0.3rem;
}
.newsWrap {
  // 如果添加了头部或者底部的固定定位、浮动...，则不需要
  height: calc(100vh - 1rem);
  overflow: hidden;
  position: relative;
}
.pullUpWrap,
.upDown {
  width: 100%;
  padding: 0 0.3rem;
  padding-bottom: 0.2rem;
  text-align: center;
  color: #999;
  font-size: 0.28rem;
}
// 解决上拉刷新，加载效果的文字显示问题
.upDown {
  position: absolute;
  top: 0px;
  left: 0;
  transform: translateY(-100%);
}
</style>